<template>
  <el-drawer
    :append-to-body="true"
    :title="$t('workflow.flowDesign.starterSetting')"
    v-model="promoterDrawer"
    direction="rtl"
    size="550px"
    :before-close="savePromoter"
  >
    <div class="promoter_content drawer_content">
      <div class="desc-text ml10 mb10">{{ $t("workflow.flowDesign.promoterFieldsDesc") }}</div>
      <el-table
        :data="promoterConf.formProperties"
        style="width: 100%"
      >
        <el-table-column
          :label="$t('workflow.flowDesign.fieldName')"
          prop="name"
        />
        <el-table-column
          :label="$t('workflow.flowDesign.opration')"
          prop="id"
        >
          <template #header>
            <el-checkbox
              v-model="isAllSelected"
              @change="handleSelectAll"
            >
              {{ $t("workflow.flowDesign.opration") }}
            </el-checkbox>
          </template>
          <template #default="scope">
            <el-checkbox v-model="scope.row['writeable']">{{ $t("workflow.flowDesign.editable") }}</el-checkbox>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <div class="mb20 mr20">
        <el-button
          @click="closeDrawer"
          size="default"
        >
          {{ $t("common.cancel") }}
        </el-button>
        <el-button
          type="primary"
          size="default"
          @click="savePromoter"
        >
          {{ $t("common.save") }}
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="PromoterDrawer">
import { computed, ref, watch } from "vue";
import { useFormWorkflow } from "@/stores/formWorkflow";
import { storeToRefs } from "pinia";
import { cloneDeep } from "lodash-es";

// 引入 store
const formWorkflowStore = useFormWorkflow();
const { promoterDrawer, promoterConfig, formFields } = storeToRefs(formWorkflowStore);

const formProperties = computed(() => {
  return formFields.value
    .filter(item => item.scheme)
    .map((item: any) => ({
      id: item.value,
      name: item.label,
      readable: true,
      writeable: false
    }));
});

const promoterConf = ref<Record<string, any>>({
  formProperties: []
});

// 添加全选状态
const isAllSelected = ref(false);

// 全选/取消全选方法
const handleSelectAll = (val: boolean) => {
  promoterConf.value.formProperties.forEach((item: any) => {
    item.writeable = val;
  });
};

watch(
  () => promoterConfig.value,
  val => {
    console.log(val);
    console.log(formProperties.value);
    // 字段
    const oldFormProperties = val && val?.formProperties ? cloneDeep(val?.formProperties) : [];
    // 找到新增的字段 并加入 如果有的话 就保留旧的数据
    promoterConf.value.formProperties = formProperties.value.map((item: any) => {
      const oldItem = oldFormProperties.find((oldItem: any) => oldItem.id === item.id);
      if (oldItem) {
        return oldItem;
      }
      return {
        ...item,
        readable: false,
        writeable: false
      };
    });
    isAllSelected.value =
      promoterConf.value.formProperties.length > 0 && promoterConf.value.formProperties.every((item: any) => item.writeable);
  },
  { deep: true, immediate: true }
);

const savePromoter = () => {
  formWorkflowStore.updatePromoterConfig(cloneDeep(promoterConf.value));
  closeDrawer();
};

const closeDrawer = () => {
  formWorkflowStore.updatePromoter();
};
</script>

<style lang="scss">
.set_promoter {
  .promoter_content {
    padding: 20px 20px 0;

    .el-button {
      margin-bottom: 20px;
    }

    .el-checkbox {
      margin-bottom: 20px;
    }
  }
}
</style>
